<template>
<div class="">
  <router-link to="/debate" class="weui_btn weui_btn_warn" style="border-radius: 0">二维码生成</router-link>
  <router-link to="/test" class="weui_btn weui_btn_plain_default">Test</router-link>
  <div class="" style="text-align: center;">
    <div class="qrcode">
    <div id="qrcode"></div>
    <br>
    <div class="">此二维码带有您的推广标识!</div>
    </div>
  </div>
  <!-- <img id="img1" src="../../static/demo.png" alt="" style="width:100%;"> -->
  <div class="img" style="display:none;width:100%;">
    <img id="img1" src="../../static/demo.png" alt="" style="width:100%;">
    <img id="img2" src="../../static/img/0.jpeg" alt="" style="width:100px;">
    <!-- <img id="img1" src="../../static/icon/aspjzy-10015.png" alt=""> -->
    <img id="" src="../../static/icon/aspjzy-10015.png" alt="">
    <img id="" src="../../static/icon/aspjzy-10018.png" alt="">
  </div>
  <canvas id="canvas1" width="1000" height="5000" style="border:1px solid #d3d3d3;">
  您的浏览器不支持 HTML5 canvas 标签。</canvas>
  <img id="imgId" src="" />
</div>
</template>

<script>
import data from '../data/data.json';
import simRecdata from '../data/simRecdata.json';
import QRCode from '../plugin/qrcode';
// import Canvas from '../class/Canvas.js';

export default {
  data() {
    return {
      items: data.items,
      sentenceList: simRecdata.sentenceList,
      groupCount: []
    };
  },
  /**
   * created
   */
  created() {

  },
  /**
   * mounted
   */
  beforeMount() {
  },
  mounted() {
    this.useqrcode();
    // Canvas.canvasToImg();

    let image = document.getElementById('img1');
    let canvas = document.getElementById('canvas1');
    // let context = canvas.getContest('2d');
    // console.log('context', context);
    // console.log('canvas.getContext', canvas.getContext('2d'));

    canvas.getContext('2d').drawImage(image, 0, 0);
    canvas.getContext('2d').drawImage(document.getElementById('img2'), 100, 300);
    canvas.getContext('2d').font = '30px Arial';
    canvas.getContext('2d').fillStyle = '#46A3CC';
    canvas.getContext('2d').fillText('来至lll的邀请', 150, 700);

    let imgSrc = document.getElementById('canvas1').toDataURL('image/png');
    document.getElementById('imgId').src = imgSrc;
  },
  methods: {
    useqrcode() {
      new QRCode(window.document.getElementById('qrcode'), {
        text: `https://h5.ichangtou.com/minic/indexFund.html?ictchannel=71210594f58547dda125db53f0fde992&getWhere=typeA`,
        width: 180,
        height: 180,
        colorDark: '#000000',
        colorLight: '#ffffff'
        // correctLevel : QRCode.CorrectLevel.H
      });
    },
    getQueryString(name) {
      console.log('1111');
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    }
  }
}
</script>

<style lang="scss" scoped>
.qrcode {
    text-align: center;
    margin-top: 3rem;
    div {
        color: #888;
        font-size:12px;
    }
    #qrcode {
        img {
            margin: 0 auto;
            width: 100%;
        }
    }
}
</style>
